<template>
    <div class="container">
        <div class="closeBtn">
            <span class="iconfont iconicon-test"></span>
        </div>

        <div class="logoWrapper">
            <span class="iconfont iconnew"></span>
        </div>

        <!-- 用户名 -->
        <AuthInput
            errMsg="请输入正确用户名"
            :rule="/^.{5,11}$/"
            placeholder="请输入用户名"
            type="text"
            @setValue="setUsername"
        />
        <!-- 密码 -->
        <AuthInput
            errMsg="密码必须是6到12位数字"
            :rule="/^\d{3,12}$/"
            placeholder="请输入密码"
            type="password"
            @setValue="setPassword"
        />

        <AuthBtn btnText="马上登录" @click.native="login" />
    </div>
</template>

<script>
    import AuthInput from "../components/AuthInput";
    import AuthBtn from "../components/AuthBtn";

    export default {
        data() {
            return {
                username: "",
                password: "",
            };
        },
        components: {
            AuthInput,
            AuthBtn,
        },
        methods: {
            setUsername(newValue) {
                this.username = newValue;
            },
            setPassword(newValue) {
                this.password = newValue;
            },
            login() {
                this.$axios({
                    method: "post",
                    url: "/login",
                    data: {
                        username: this.username,
                        password: this.password,
                    },
                }).then((res) => {
                    console.log(res.data);
                    const { message, data } = res.data;

                    if (message == "登录成功") {
                        this.$toast.success("登录成功");
                        // 登录成功后将 token 储存起来

                        localStorage.setItem("token", data.token);
                        localStorage.setItem("userId", data.user.id);

                        // 跳转页面
                        this.$router.push("/profile");
                    }
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .container {
        padding: 18 /360 * 100vw;
    }
    .iconicon-test {
        font-size: 27 /360 * 100vw;
    }
    .logoWrapper {
        text-align: center;
        .iconnew {
            font-size: 126 /360 * 100vw;
            color: #d81e06;
        }
    }
</style>